<template>
  <div class="test_wrapper" @dragover="dragover($event)">
    <transition-group class="transition-wrapper" name="sort">
      <!-- {{list}} -->
      <div v-for="(item) in list" :key='item.id' class="sort-item" :draggable="true"
        @dragstart="dragstart(item)" @dragenter="dragenter(item, $event)" @dragend="dragend(item, $event)"
        @dragover="dragover($event)">
        {{ item.label }}
      </div>
    </transition-group>
  </div>
</template>
  
<script lang="ts">

import { defineComponent, inject, reactive, ref, onMounted, watch, toRaw } from "vue";
import service from "../service";
import { isArray } from "/@/core/utils";

export default defineComponent({
  name: "dataSort",
  props: {
    // modelValue: [Number, String, Array],
    data: [Array]
    // props: Object
  },

  // props: {
  // 	value: {
  // 		type: String,
  // 	}
  // },

  emits: ["refresh"],
  setup(props, { emit }) {
    const service = inject<any>("service");
    const oldData: any = ref(null) // 开始排序时按住的旧数据
    const newData: any = ref(null) // 拖拽过程的数据
		const list = ref([]);
    // onMounted(async ()=>{
    //   props.data.forEach((element,index) => {
    //   list.value.push({id:index,label:element})
    // });
    // })
    // 更新排序
    const updateSort = function(){
      
      service.courseSourceService.updateSort({data:list.value})
    }
    
    // 数据列表
    // 解析值
		watch(
			() => props.data,
			(val: any) => {
        console.log(props.data,"");
        if (isArray(val)){
          val.forEach((element: any,index: number) => {
            const sort = element.indexOf("、")
            const id = element.indexOf("-")
            if (id !== -1){
              list.value.push({id:parseInt(element.slice(0,id)),label:element.slice(sort+1,),sort:parseInt(element.slice(id+1,sort))})
            }else{
              list.value = [];
            }
          });
        }else{
          list.value = [];
        }
				
			},
			{
				immediate: true
			}
		);

    // 列表数据
    // const list: any = ref([
    //   { id: 1, label: '测试一号' },
    //   { id: 2, label: '测试二号' },
    //   { id: 3, label: '测试三号' },
    //   { id: 4, label: '测试四号' },
    // ]);

    function dragstart(value: any) {
      oldData.value = value
    }

    // 记录移动过程中信息
    function dragenter(value: any, e: any) {
      newData.value = value
      e.preventDefault()
    }

    // 拖拽最终操作
    async function dragend(value: any, e: any) {
      if (oldData.value !== newData.value) {
        let oldIndex = list.value.indexOf(oldData.value)
        let newIndex = list.value.indexOf(newData.value)
        let newItems = [...list.value]
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, oldData.value)
        list.value = [...newItems]
        list.value.forEach((item,index)=>{
          item.sort = index+1
        })
        console.log(list.value,"11111111111111111");
        await updateSort()
        emit("refresh");
      }
    }


    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    function dragover(e: any) {
      e.preventDefault()
    }

    return {
      dragover,
      dragend,
      dragenter,
      dragstart,
      list,
      list
    }
  }

})
</script>

<style lang="scss">
.sort-move {
  transition: transform 0.3s;
}
.sort-item{
  margin: 10px 300px 10px 120px;
  color: white;
  border: 1px solid #fff;
  padding: 10px;
  background-color: #456;
}

// .test_wrapper {
//   border: 1px soild #000 !important;
// }
</style>